<template>
	<view class="page_bg">
		<u-form :model="form" ref="uForm" :label-style="labelS" :error-type="['toast']">
			<u-form-item label="姓名:" prop="name">
				<u-input v-model="form.name" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="电话:" prop="phoneNumber">
				<u-input v-model="form.phoneNumber" placeholder="请输入电话" />
			</u-form-item>
			<u-form-item label="地区:" prop="labelShow">
				<u-input type="select" :select-open="show" v-model="labelShow" placeholder="请选择地区" @click="show = true">
				</u-input>
			</u-form-item>
			<u-form-item prop="detail">
				<u-input v-model="form.detail" type="textarea" placeholder="详细地址：如小区、楼栋、门牌号" />
			</u-form-item>
			<u-form-item label="设为默认地址" label-width="50%" class="default_address">
				<u-switch slot="right" size="40" v-model="switchVal" active-color="#FDD303"></u-switch>
			</u-form-item>
		</u-form>

		<u-toast ref="uToast" />
		<u-picker mode="region" :default-region="[form.province, form.city, form.area]" v-model="show"
			@confirm="selectAddress"></u-picker>

		<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="send">
			确认
		</u-button>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				labelS: {
					fontWeight: 'bold'
				},
				// 获得的信息
				fun: 'add',
				addressId: '',

				// 表单
				form: {
					name: '',
					phoneNumber: '',
					province: '北京市',
					city: '市辖区',
					area: '东城区',
					detail: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur']
					}],
					phoneNumber: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '请输入正确的手机号',
						trigger: ['blur'],
					}],
					detail: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur']
					}],
				},
				// 仅显示文本
				labelShow: '',
				// 是否设为默认地址
				switchVal: false,

				show: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.fun = options.type
				uni.setNavigationBarTitle({
					title: options.type == 'edit' ? '编辑地址' : '新增地址'
				});
				if (options.type == 'edit') {
					this.getAddressInfo(options.id)
					this.addressId = options.id
				}
			},
			// 获取地址信息
			getAddressInfo(id) {
				vk.callFunction({
					url: 'client/address/kh/getDetail',
					title: '请求中...',
					data: { id },
					success: function(res) {
						that.form.name = res.data.name
						that.form.phoneNumber = res.data.phone_number
						that.form.province = res.data.province
						that.form.city = res.data.city
						that.form.area = res.data.area
						that.form.detail = res.data.detail
						that.switchVal = res.data.is_default == 0 ? false : true
						that.labelShow = res.data.province + '-' + res.data.city + '-' + res.data.area
					}
				});
			},
			// 完成地区选择
			selectAddress(e) {
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.area = e.area.label
				this.labelShow = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			// 提交
			send() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					if (that.labelShow == '') {
						that.$refs.uToast.show({
							title: '请选择地址',
							type: 'default'
						})
						return
					}
					that.addInfo()
				})
			},
			// 添加
			addInfo() {
				vk.callFunction({
					url: that.fun == 'add' ? 'client/address/kh/add' : 'client/address/kh/update',
					title: '请求中...',
					data: {
						name: that.form.name,
						phone_number: that.form.phoneNumber,
						province: that.form.province,
						city: that.form.city,
						area: that.form.area,
						detail: that.form.detail,
						is_default: that.switchVal ? 1 : 0,
						address_id: that.addressId,
						need_user_info: true
					},
					success: function(res) {
						if (res.code == 0) {
							that.$refs.uToast.show({
								title: '修改地址成功',
								type: 'success'
							})
							setTimeout(() => {
								uni.$emit('addressUpdate', { msg: '页面更新' })
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		min-height: 100vh;
		background: #F4F6F9;
		padding-top: 2rpx;

		.u-form-item {
			padding: 21rpx 20rpx;
			background-color: #FFFFFF;
		}

		.default_address {
			margin-top: 21rpx;
		}
	}

	/deep/ .u-column-item {
		font-size: 28rpx;
	}

	.save_btn {
		background-color: #333333;
		color: #FFFFFF;
		height: 70rpx;
		width: 88%;
		margin-top: 400rpx;
	}
</style>
